<template>
<article class="page page-people-cipher container">
	<h4 class="text-center">跳舞的小人</h4>
  <fieldset class="panel-1">
    <legend>密文字符</legend>
    <table class="table table-bordered">
      <tbody>
        <tr v-for="(row, rowIndex) in peopleData" :key="`row_${rowIndex}`">
          <td v-for="(col, colIndex) in row" :key="`td_${rowIndex}_${colIndex}`"
          @click="clickItemHandler(col)">
            <img :src="peopleDict[col]" />
          </td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  <fieldset class="panel-2">
    <legend>明文</legend>
    <div class="row-flex" align="center">
      <div class="row-flex-main"><input class="form-control" type="text" v-model="plaintext" readonly /></div>
      <div class="row-flex-suffix" title="清空" @click="plaintext=''">
        <i class="fa fa-trash-o"></i>
      </div>
    </div>
  </fieldset>
</article>
</template>

<script>
export default {
	name: 'people-cipher',
	data () {
		return {
			plaintext: '',
      peopleData: [
        ['a','b','c','d','e','f','g','h','i','j','k','l','m'],
        ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
        ['n','o','p','q','r','s','t','u','v','w','x','y','z'],
        ['N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
      ],
      peopleDict: {
        a: this.loadFile('a'), b: this.loadFile('b'), c: this.loadFile('c'),
        d: this.loadFile('d'), e: this.loadFile('e'), f: this.loadFile('f'),
        g: this.loadFile('g'), h: this.loadFile('h'), i: this.loadFile('i'),
        j: this.loadFile('j'), k: this.loadFile('k'), l: this.loadFile('l'),
        m: this.loadFile('m'), n: this.loadFile('n'), o: this.loadFile('o'),
        p: this.loadFile('p'), q: this.loadFile('q'), r: this.loadFile('r'),
        s: this.loadFile('s'), t: this.loadFile('t'), u: this.loadFile('u'),
        v: this.loadFile('v'), w: this.loadFile('w'), x: this.loadFile('x'),
        y: this.loadFile('y'), z: this.loadFile('z'),
        A: this.loadFile('a2'), B: this.loadFile('b2'), C: this.loadFile('c2'),
        D: this.loadFile('d2'), E: this.loadFile('e2'), F: this.loadFile('f2'),
        G: this.loadFile('g2'), H: this.loadFile('h2'), I: this.loadFile('i2'),
        J: this.loadFile('j2'), K: this.loadFile('k2'), L: this.loadFile('l2'),
        M: this.loadFile('m2'), N: this.loadFile('n2'), O: this.loadFile('o2'),
        P: this.loadFile('p2'), Q: this.loadFile('q2'), R: this.loadFile('r2'),
        S: this.loadFile('s2'), T: this.loadFile('t2'), U: this.loadFile('u2'),
        V: this.loadFile('v2'), W: this.loadFile('w2'), X: this.loadFile('x2'),
        Y: this.loadFile('y2'), Z: this.loadFile('z2'),
      }
		}
	},
	methods: {
		clickItemHandler (val) {
			this.plaintext += val
		},
    loadFile (filename) {
      return require(`@/assets/images/tools/${filename}.png`)
    },
	}
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-people-cipher {
	display: flex;
	flex-direction: column;
  .panel-1 {
    .table {
      td {
        cursor: pointer;
      }
      img {
        display: block;
        width: 5vw;
        height: 5vw;
        border-radius: .5vw;
        margin: auto;
      }
    }
  }
  .panel-2 {
    margin-top: 1em;
    height: 0;
    flex-grow: 1;
    .fa-trash-o {
      font-size: 24px;
      margin-left: .25em;
      cursor: pointer;
    }
  }
}
</style>
